<template>
	<view class="wapper">
		<orderHeader :onlyHeader="false" :tradeScene="tradeScene" @changeTradeScene="_changeTradeScene" @back="leftClick(urlIndex)"></orderHeader>
		<myPostedRecharge ref="myPostedRecharge" v-if="tradeScene == 1" @deletePosted="deletePostedHandle">
		</myPostedRecharge>
		<myPostedExchange ref="myPostedExchange" v-if="tradeScene == 2" @deletePosted="deletePostedHandle">
		</myPostedExchange>
		<u-modal :show="showModal" title="" :showCancelButton="true" width="550rpx">
			<view class="modal-content">
				<view class="top-btn">
					<view class="iconfont icon-close close-icon" @click="()=>{showModal = false}"> </view>
				</view>
				<view style="height: 50rpx;">
					
				</view>
					{{$t('order.del-tips')}}
			</view>

			<view class="modal-btn" slot="confirmButton">
				<view class="btn confirm-btn" @click="confirmDel">
					{{$t('index.Confirm')}}
				</view>
				<view class="btn cancel-btn" @click="()=>{showModal = false}">
					{{$t('index.Cancel')}}
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import orderHeader from './components/orderHeader.vue'
	import myPostedExchange from './myPostedExchange.vue'
	import myPostedRecharge from './myPostedRecharge.vue'
	import {
		exchangeCancel
	} from '@/services/bourse.js'
	export default {
		data() {
			return {
				tradeScene: 1,
				showModal: false,
				delOrderInfo: {},
				urlIndex: "bourseMyPosted"
			}
		},
		components: {
			orderHeader,
			myPostedExchange,
			myPostedRecharge
		},
		onShow() {
			setTimeout(() => {
				this.getList()
			}, 100);
		},
		onLoad(option) {
			this.getPrePages(this.urlIndex) // 获取上一个页面的路径已经参数
			this.tradeScene = option.tradeScene || 1
		},
		methods: {
			getList() {
				if (this.tradeScene == 1) {
					this.$refs['myPostedRecharge']._getTradeList()
				} else if (this.tradeScene == 2) {
					this.$refs['myPostedExchange']._getCurrencyList()
				}
			},
			_changeTradeScene(val) {
				this.tradeScene = val
			},
			deletePostedHandle(item) {
				this.showModal = true
				this.delOrderInfo = item
			},
			async confirmDel() {
				const {
					success
				} = await exchangeCancel({
					tradeId: this.delOrderInfo.tradeId
				})
				if (success) {
					this.getList()
					this.showModal = false
					uni.showToast({
						title: '删除成功',
						duration: 2000,
						icon: 'success'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wapper {
		padding-top: var(--status-bar-height);
	}

	/deep/ .u-popup__content {
		border-radius: 50rpx !important;
	}

	.modal-content {
		font-size: 28rpx;
		font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
		font-weight: 400;
		color: #878787;
		line-height: 40rpx;
		text-align: center;
		
		.top-btn {
			    position: absolute;
			    right: 60rpx;
			    top: 50rpx;
			text-align: right;
			margin-bottom: 20rpx;
		}
		
		.close-icon {
			font-size: 48rpx;
			color: #606165;
		}
	}

	.modal-btn {
		display: flex;
		justify-content: space-between;

		.btn {
			text-align: center;
			width: 210rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 64rpx;
			border: 2rpx solid rgba(135, 135, 135, 0.6);

		}

		.confirm-btn {
			color: #878787;
		}

		.cancel-btn {
			border: 2rpx solid #61BDB2;
			background: #61BDB2;
			color: #FFFFFF;
		}
	}

	/deep/ .u-modal {
		border-radius: 50rpx;
	}
</style>
